<template>
  <div class="admin-notice">
    <GhNavBar title="通知公告-管理" />
    <!-- 头部搜索和添加公告 -->
    <div class="head">
        <van-search class="search"  v-model="value" placeholder="搜索标题"   />
        <van-button class="add-btn" @click="addNotice" native-type="submit"  block  >
               添加通知公告
         </van-button>
    </div>
    <div class="list">
        <div class="total_notice">共有{{items.length}}条符合条件记录</div>
        <van-list v-if="items.length > 0">
            <van-cell v-for="announcement in items" :key="announcement.id" class="announcement-item">
                <div class="title">{{ announcement.title }}<span v-if="announcement.is_active==1">【置顶】</span></div>
               <div class="time">创建时间：{{ announcement.updated_at }}</div>
               <div class="operate">
                <van-button @click="editNotice(announcement)">编辑</van-button>
                <van-button @click="del_Notice(announcement.id)">删除</van-button>
                <van-button @click="toTop(announcement.id)">置顶</van-button>
                <van-button>预览</van-button>
               </div>
            </van-cell>
          </van-list>
          <van-empty v-else description="暂无系统公告" />
      </div>
      <van-popup class="updatepage" v-model:show="show" position="bottom" closeable   >
         <h3>编辑公告</h3>
         <van-field v-model="updateData.title"  label="标题" label-width="60px" maxlength="25" autocomplete="off"  ></van-field>
         <van-field
         v-model="updateData.content"
         rows="4"
         class="custom-field"
         autosize
         label="内容"
         label-width="40px"
         maxlength="70"
         type="textarea"
         show-word-limit
         placeholder="一句话介绍我自己"
     />
         <van-button native-type="submit" @click="submit_updateNotice" block round type="primary">
            确定修改
          </van-button>
      </van-popup>




</div>
</template>

<script setup>
import {ref,reactive,onMounted} from "vue"
import {useRouter} from 'vue-router'
import {useUserStore}from '@/stores'
import { Toast, Dialog } from 'vant';
import 'vant/es/toast/style'
import {getAllNotice} from '@/services/others'
import {updateNotice,noticeToTop,delNotice} from '@/services/admin'
//弹出层
const show=ref(false)
//编辑公告双向绑定数据
const updateData=ref({
    title:'',
    content:'',
    id:''
})

const items=ref([])
const fetchData=async()=>{
    const res=await getAllNotice()
    items.value=res.data
}

onMounted(fetchData)

const router=useRouter()
const value=ref('')

//添加公告
const addNotice=()=>{
    router.push('/addNotice')
}

//管理员编辑公告
const editNotice=(announcement)=>{
    console.log(announcement)
    show.value=true
    updateData.value.title=announcement.title
    updateData.value.content=announcement.content
    updateData.value.id=announcement.id
} 
//编辑公告提交
const submit_updateNotice=async()=>{
    const formData=new FormData();
    formData.append('title',updateData.value.title)
    formData.append('content',updateData.value.content)
    formData.append('id',updateData.value.id)
    const res=await updateNotice(formData).then((response)=>{
      return response
    }).catch((error)=>{
     return error
    })
//    console.log(res.status)
   if(res.status!==201){
   if(res.response.status==402){
        const toastMessage=res.response.data.error
        Toast.fail(toastMessage)
        return
       }
    }
    Toast.success('成功修改公告信息')
    updateData.value={}
    show.value=false
}

//删除系统公告
const del_Notice=async(id)=>{
 
   await Dialog.confirm({
       message:'您确定要删除公告吗？'
    })
    .then(async()=>{
        const res=await delNotice(id).then((response)=>{
        return response;
       }).catch((error)=>{
        return error
        })
         if(res.status!==201){
         if(res.response.status==402){
           const toastMessage=res.response.data.error
           Toast.fail(toastMessage)
            isRegistering.value=false;
            return
           }
         }
         Toast.success('删除成功')
         fetchData()
    })
    .catch(()=>{
       Toast('取消操作')
    })





}


// const top=ref(false)
//置顶公告
const toTop=async(id)=>{
   const res=await noticeToTop(id).then((response)=>{
      return response
    }).catch((error)=>{
     return error
    })
   console.log(res)
   Toast.success('置顶成功')
   fetchData()
}

</script>

<style lang="scss" scoped>
.admin-notice{
    width: 100%;
     .head{
        display: flex;
        position: fixed;
        /* z-index: 9999; */
        justify-content: space-between;
        align-items: center;
        min-height: 30px;
        background-color: #fff;
         top:35px;
         padding: 0 10px;
         .search{
            flex: 1;
         }
         .add-btn{
            background-color: var(--gh-admin);
            color: #fff;
            font-size: 14px;
            font-family: '黑体';
            border-radius: 5px;
            height: 30px;
            width: 130px;
         }
     }
     .list{
        margin-top: 85px;
        padding:0 10px;
        .total_notice{
            text-align: center;
            font-size: 10px;
            color: var(--gh-text3);
        }
        .van-cell{
           background-color:#fff;
           border:1px solid var(--gh-line) ;margin-top: 5px;
           .title{
            background-color: #f5f5f5;
            width: 100%;
            line-height: 30px;
            height: 30px;
            span{
                font-size: 10px;
                color: var(--gh-price);
                margin-left: 10px;
            }
           }
           .time{
              font-size: 10px;
              color: var(--gh-text3);
              margin: 10px  0 0 30px;
           }
           .operate{
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .van-button{
                height: 25px;
                font-size: 10px;
                background-color: #f5f5f5;
            }
           }
        }
     }
    .updatepage{
        h3{
            text-align: center;
            margin-top: 20px;
            font-size: 14px;
        }
        .van-button{
            width: 60%;
            left: 50%;
            transform: translate(-50%);
            margin: 20px 0;
        }
    }
}


</style>
